<style>
.p-plugin-search {
	float: right; 
	margin-right: 10px;
	margin-bottom: 10px;
}
</style>

<div ng-controller="PluginCtrl">
<div class="container-fluid">

	<div class="row-fluid">

	<div class="widget-box">
		<div class="widget-title"> 
			<span class="icon"><i class="icon-gear"></i></span>
			<h5>Plugin list</h5>

			<div class="actions">
				<button class="btn-info" ng-click="ctrl.isShowMirror = !ctrl.isShowMirror">Change mirror</button>
			</div>
		</div>
		<div class="widget-content">
			<div class="form-group p-plugin-mirror" ng-show="ctrl.isShowMirror" ng-class="{'has-error': ctrl.mirrorError}">
				<label class="control-label" for="input-mirror">Mirror:</label>
				<input type="text" id="input-mirror" ng-model="query.mirror" class="form-control" ng-class="{'error': ctrl.mirrorError}" style="width: 800px;" />
			</div>

			<div class="p-plugin-search">
				<input type="text" ng-model="query.q" style="width: 400px;" placeholder="search keyword" />
				<button class="btn" ng-click="search()">Search</button>
			</div>

			<table class="table table-bordered table-striped">
				<tr>
					<th width="20%">Name</th>
					<th width="10%">Version</th>
					<th width="50%">Description</th>
					<th></th>
				</tr>
				<tr ng-repeat="one in list">
					<td>{{one.code}}</td>
					<td>{{one.version}}</td>
					<td>{{one.des}}</td>
					<td>
						<span ng-if="one.isInstalled">
							<i class="icon icon-check"></i>
							<button class="btn-warning btn-short" ng-click="del(one)">Del</button>
						</span>

						<span ng-if="!one.isInstalled">
							<i class="icon icon-circle-blank"></i>
							<button class="btn-info btn-short" ng-click="add(one)">Add</button>
						</span>
					</td>
				</tr>
			</table>

		</div>
	</div>

	</div><!-- /.row-fluid -->

</div>
</div>